
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>经纬度转换</title>
  <!-- 引入vue -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .el-button{
      margin: 5px !important;
    }
    .el-form-item{
      margin-bottom: 8px;
    }
    body {
      background-color: #f5f5f5;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    #main {
      max-width: 520px;
      margin: 30px auto;
      padding: 20px;
      background: white;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    }

    .el-form-item__label {
      font-weight: bold;
      font-size: 16px;
    }

    .el-input {
      width: 200px;
      height: 32px;
      font-size: 14px;
      border-radius: 4px;
    }

    .el-button {
      display: inline-block;
      margin-right: 10px;
      font-size: 14px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      padding: 0 15px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      background-color: #409eff;
      color: #fff;
    }

    .el-button:hover {
      opacity: 0.8;
    }

    .tips {
      margin-top: 20px;
      font-size: 14px;
      line-height: 24px;
      color: #777;
    }

  </style>
</head>

<body>
<div id="main">
  <el-form ref="form" :model="form" label-width="88px">
    <el-form-item label="转换前经度">
      <el-input type="number" v-model="form.lng"></el-input>
    </el-form-item>
    <el-form-item label="转换前纬度">
      <el-input type="number" v-model="form.lat"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="change(1)">百度转高德</el-button>
      <el-button type="primary" size="small" @click="change(2)">高德转百度</el-button>
      <el-button type="primary" size="small" @click="change(3)">高德转国际</el-button>
      <el-button type="primary" size="small" @click="change(4)">国际转高德</el-button>
      <el-button type="primary" size="small" @click="change(5)">百度转国际</el-button>
      <el-button type="primary" size="small" @click="change(6)">国际转百度</el-button>
    </el-form-item>
    <el-form-item label="转换后经度">
      <el-input type="number" v-model="form.rlng"></el-input>
    </el-form-item>
    <el-form-item label="转换后纬度">
      <el-input type="number" v-model="form.rlat"></el-input>
    </el-form-item>
  </el-form>
  <div class="tips">
    <br /><br />
    国际定位标准: WGS84  公用转化的坐标系,一般保存在后端数据库
    <br /><br />
    火星坐标系: GCJ-02  国测局标准,中国使用,在国际定位标准上加密生成的. 高德地图,腾讯地图以及谷歌中国区地图使用该坐标系
    <br /><br />
    百度坐标系: BD-09  百度坐标系,在火星坐标系上再次加密生成的. 百度地图使用该坐标系
  </div>
</div>
</body>
<script>

  /**
   * Created by Wandergis on 2015/7/8.
   * 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换
   */
          //定义一些常量
  var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
  var PI = 3.1415926535897932384626;
  var a = 6378245.0;
  var ee = 0.00669342162296594323;
  /**
   * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
   * 即 百度 转 谷歌、高德
   * @param bd_lon
   * @param bd_lat
   * @returns {*[]}
   */
  var bd09togcj02 = function bd09togcj02(bd_lon, bd_lat) {
    var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
    var x = bd_lon - 0.0065;
    var y = bd_lat - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
    var gg_lng = z * Math.cos(theta);
    var gg_lat = z * Math.sin(theta);
    return [gg_lng, gg_lat]
  };

  /**
   * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
   * 即谷歌、高德 转 百度
   * @param lng
   * @param lat
   * @returns {*[]}
   */
  var gcj02tobd09 = function gcj02tobd09(lng, lat) {
    var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
    var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
    var bd_lng = z * Math.cos(theta) + 0.0065;
    var bd_lat = z * Math.sin(theta) + 0.006;
    return [bd_lng, bd_lat]
  };

  /**
   * WGS84转GCj02
   * @param lng
   * @param lat
   * @returns {*[]}
   */
  var wgs84togcj02 = function wgs84togcj02(lng, lat) {
    if (out_of_china(lng, lat)) {
      return [lng, lat]
    } else {
      var dlat = transformlat(lng - 105.0, lat - 35.0);
      var dlng = transformlng(lng - 105.0, lat - 35.0);
      var radlat = lat / 180.0 * PI;
      var magic = Math.sin(radlat);
      magic = 1 - ee * magic * magic;
      var sqrtmagic = Math.sqrt(magic);
      dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
      dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
      var mglat = lat + dlat;
      var mglng = lng + dlng;
      return [mglng, mglat]
    }
  };

  /**
   * GCJ02 转换为 WGS84
   * @param lng
   * @param lat
   * @returns {*[]}
   */
  var gcj02towgs84 = function gcj02towgs84(lng, lat) {
    if (out_of_china(lng, lat)) {
      return [lng, lat]
    } else {
      var dlat = transformlat(lng - 105.0, lat - 35.0);
      var dlng = transformlng(lng - 105.0, lat - 35.0);
      var radlat = lat / 180.0 * PI;
      var magic = Math.sin(radlat);
      magic = 1 - ee * magic * magic;
      var sqrtmagic = Math.sqrt(magic);
      dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
      dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
      var mglat = lat + dlat;
      var mglng = lng + dlng;
      return [lng * 2 - mglng, lat * 2 - mglat]
    }
  };

  var transformlat = function transformlat(lng, lat) {
    var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
    ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
    return ret
  };

  var transformlng = function transformlng(lng, lat) {
    var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
    ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
    return ret
  };

  /**
   * 判断是否在国内，不在国内则不做偏移
   * @param lng
   * @param lat
   * @returns {boolean}
   */
  var out_of_china = function out_of_china(lng, lat) {
    return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
  };



  var vm = new Vue({
    el: "#main",
    data() {
      return{
        form:{
          lng:'',
          lat:'',
          rlng:'',
          rlat:'',
        }
      }
    },
    methods: {
      change(t){
        let form=this.form
        if(t==1){
          let arr=bd09togcj02(form.lng*1,form.lat*1)
          form.rlng=arr[0]
          form.rlat=arr[1]
        }else if(t==2){
          let arr=gcj02tobd09(form.lng*1,form.lat*1)
          form.rlng=arr[0]
          form.rlat=arr[1]
        }else if(t==3){
          let arr=gcj02towgs84(form.lng*1,form.lat*1)
          form.rlng=arr[0]
          form.rlat=arr[1]
        }else if(t==4){
          let arr=wgs84togcj02(form.lng*1,form.lat*1)
          form.rlng=arr[0]
          form.rlat=arr[1]
        }else if(t==5){
          let ary=bd09togcj02(form.lng*1,form.lat*1)
          let arr=gcj02towgs84(ary[0]*1,ary[1]*1)
          form.rlng=arr[0]
          form.rlat=arr[1]
        }else if(t==6){
          let ary=wgs84togcj02(form.lng*1,form.lat*1)
          let arr=gcj02tobd09(ary[0]*1,ary[1]*1)
          form.rlng=arr[0]
          form.rlat=arr[1]
        }
      },
    }
  })
</script>

</html>
